<template>
  <div class="app-container">
    <el-card>
      <el-table :data="tableData.data" border style="width: 100%">
        <el-table-column align="center" prop="id" width="100" label="ID" />
        <el-table-column align="center" prop="codeImageUrl" label="背景图">
          <template slot-scope="scope">
            <el-image
              style="width: 80px; height: 80px"
              :src="scope.row.materialUrl"
              :preview-src-list="[scope.row.materialUrl]"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="素材名称" />
        <el-table-column align="center" prop="qrcodeUrl" label="二维码链接">
        </el-table-column>
        <el-table-column align="center" prop="paramKey" label="关联参数">
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="openLog(scope.row)"
              >预览下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <detail-log ref="reportLogRef"></detail-log>
  </div>
</template>
<script>
import { getPlacardPage, downloadCode } from "@/api/customer";
import detailLog from "./components/detailLog.vue";
export default {
  name: "index",
  components: {
    detailLog
  },
  data() {
    return {
      tableData: {
        data: [],
        total: 0
      },
      searchForm: {
        pageNum: 1,
        pageSize: 10
      },
      imgObj: {
        materialUrl: "",
        codeImageUrl: ""
      },
      dialogVisible: false
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    openLog(v) {
      let that = this;
      downloadCode(v.id).then(res => {
        this.imgObj.materialUrl = v.materialUrl;
        this.imgObj.codeImageUrl = res.data;
        this.$refs.reportLogRef.openlog(this.imgObj);
      });
    },
    getList() {
      getPlacardPage(this.searchForm).then(res => {
        this.tableData.data = res.data.list;
        this.tableData.total = res.data.total;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
.img-box {
  text-align: center;
  width: 300px;
  height: 600px;
  position: relative;
  overflow: hidden; // 确保超出部分被隐藏
}

.code {
  position: absolute;
  left: 30px; /* Initial position */
  top: 30px; /* Initial position */
  width: 100px; /* Adjust width as per your design */
  height: 100px; /* Adjust height as per your design */
  cursor: pointer; /* Change cursor to indicate clickable */
}
</style>
